<template>
    <div class="completion_rate">
        <el-form :model="completionRate" ref="completionRate" label-width="100px" class="demo-ruleForm">
            <el-form-item label="描述" prop="desc">
                <el-input type="text"  v-model="completionRate.desc" />
            </el-form-item>
            <el-form-item label="完成总量" prop="rateTotal">
                <el-input type="text" class="first_input" v-model="completionRate.rateTotal"/>
                <el-input type="text" class="second_input" v-model="completionRate.rateTotal"/>
            </el-form-item>
            <el-form-item label="已完成量" prop="rate">
                <el-input type="text" class="first_input" v-model="completionRate.rate"/>
                <el-input type="text" class="second_input" v-model="completionRate.rate" />
            </el-form-item>
            <el-form-item label="单位" prop="content">
                <el-select v-model="completionRate.value" placeholder="请选择" class="first_input" style="width:120px">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
/**
* description: 完成率模块
*/
export default {
    data() {
        return {
            completionRate:{
                desc:'',
                rateTotal:'',
                rate:'',
                value: ''
            },
            // 下拉框的数据
            options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
        }
    },
    methods: {
        submit() {
           return {formData: this.completionRate}
        },
    }
}
</script>
<style lang="scss" scoped>
.first_input{
    width: 120px !important;
    margin-right: 16px;
}
.second_input{
    width: 424px !important;
}
::v-deep .el-select--small .el-input--small{
    width: 120px !important;
}
</style>